<template>
  <section class="track">
    <div class="track-left track-item">
      <h4 class="item-title">本人轨迹</h4>
      <el-scrollbar style="height: calc(100% - 10px)">
        <ul class="item-process">
          <li v-for="(item, key, i) in processData" :key="i">
            <div :class="['process-step step-timer', i == 0 ? 'first': '', proceessOff[key]? '':'active']">
              <span class="text" @click.stop="changeProcess(key)">{{key}}</span>
              <i class="iconfont icon-timer" @click.stop="changeProcess(key)"></i>
            </div>
            <ul :class="['step-wrapper', proceessOff[key] ? '':'active']" v-for="(list, index) in item" :key="index">
              <li class="process-step" v-for="(steps, i) in list" :key="i">
                <span class="text">{{ i == 0 ? index :'' }}</span>
                <i :class="['iconfont', steps.icon]"></i>
                <div class="step-infor">
                  <span>{{steps.ptime}}</span>
                  <p>{{steps.label}}</p>
                  <span>{{steps.address?steps.address:''}}</span>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </el-scrollbar>
    </div>
    <div class="track-right track-item">
      <div class="right-top">
        <h4 class="item-title">相似轨迹查询</h4>
        <div class="search-wrapper">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">选择所有轨迹</el-checkbox>
          <el-input v-model="input" placeholder="请输入阈值（默认为3）" size="mini" @keyup.enter.native="getTrackData()"></el-input>
          <el-button icon="el-icon-search" size="mini" @click="getTrackData()"></el-button>
        </div>
        <el-checkbox-group 
          v-model="checked"
          @change="handleCheckedChange">
          <el-checkbox v-for="(item, key) in typeCount" :label="key" :key="key">
            <div class="check-wrapper" v-if="item">
              <i :class="['iconfont', item.icon]"></i>
              <div class="text">
                <p>{{item.num}}</p>
                <span>{{item.label}}</span>
              </div>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <ul v-if="total && total > 0" class="content-list">
        <li class="list-item" v-for="(item, id) in contentData" :key="id">
          <div class="item-header" v-if="item['info']"> 
            <div class="img-wrapper">
              <img :src="item['info']['img']" alt="">
            </div>
            <div class="item-info">
              <span class="num">{{item['similar'].length}}</span>
              <p class="name">{{item['info']['name']}}</p>
              <p class="line">
                <span>{{item['info']['sex']}}</span>
                <span>{{item['info']['age']}}岁</span>
              </p>
              <p>{{item['info']['id']}}</p>
              <p>户籍地址：{{item['info']['hjdz']}}</p>
              <el-radio-group v-model="item.radio" @change="getAllTrack(id)">
                <el-radio label="similar">相似轨迹</el-radio>
                <el-radio label="all">全部轨迹</el-radio>
              </el-radio-group>
            </div>
          </div>
          <el-scrollbar style="height: calc(100% - 120px); overflow: hidden">
            <ul class="item-bottom">
              <li v-for="(list, key) in item[item.radio]" :key="key">  
                <i class="iconfont icon-weizhi"></i>
                <div class="text">
                  <span>{{list.time}}</span>
                  <p>{{list.label}}</p>
                </div>
              </li>
            </ul>
          </el-scrollbar>
        </li>
      </ul>
      <div v-else class="nodata">暂无相关数据</div>
      <el-pagination
        v-if="total && total > 0"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total">
      </el-pagination>
    </div>
  </section>
</template>

<script>
import { mockdata } from '../mock/mockdata.js'
import { apiTrackData, apiGetPersonInfo, apiRegularData } from '../api/api.js'
export default {
  props: {
    regularData: {
      type: Object
    },
    typeList: {
      type: Object
    },
    trackParams: {
      type: Object
    },
    imgBaseUrl: String
  },
  data () {
    return {
      proceessOff: mockdata.processOff,
      processData: mockdata.processData,
      isIndeterminate: false,
      checkAll: true,
      input: 3,
      checked: [],
      currentPage: 1,
      pageSize: 6,
      total: 0,
      trackData: {},
      contentData: mockdata.contentData,
      typeCount: {}
    }
  },
  mounted() {
    // 本人轨迹模块方法
    this.getProcessData();
    // 先获取轨迹类型  再获取相似轨迹人员信息
    this.getTypeCount();
  },
  watch: {
    // 监听本人轨迹信息是否改变  从而断定是否更换省份证号码
    regularData() {
      this.getTypeCount();
      this.getProcessData();
    },
    // 相似轨迹类型选择
    trackParams(val) {
      // console.log(val);
      this.checked = val.code.split(',');
      // val.code.split(',').forEach(elem => {
      //   this.checked.push(elem);
      // });
      this.getTrackData();
    }
  },
  methods: {
    // 轨迹类型
    getTypeCount() {
      this.typeCount = {};
      let _typeCout = this.regularData.typeCout;
      if(!_typeCout) {
        return false;
      }
      for(let k in _typeCout) {
        this.$set(this.typeCount, k, this.typeList[k])
      }
      this.getTrackData();
    },
    changeProcess(key) {
      this.$set(this.proceessOff, key, !this.proceessOff[key])
    },
    // 是否全选
    handleCheckAllChange(val) {
      this.checked = val ? Object.keys(this.typeCount) : [];
      this.isIndeterminate = false;
      this.getTrackData();
    },
    // 单选change
    handleCheckedChange(value) {
      let checkedCount = value.length,
          _checkListLenght = Object.keys(this.typeCount).length;
      this.checkAll = checkedCount === _checkListLenght;
      this.isIndeterminate = checkedCount > 0 && checkedCount < _checkListLenght;
      this.getTrackData();
    },
    getProcessData() {
      this.processData = {};
      let _resdata = this.regularData['list'];
      if(!_resdata || _resdata.length < 1) {
        return ;
      }
      // console.log(_resdata);
      let _date,
          month,
          date,
          _item,
          _rdata = this.processData = {};
      this.proceessOff = {};
      _resdata.forEach(elem => {
        _date = elem['time'].replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/, '$1-$2-$3 $4:$5:$6');
        month = new Date(_date).Format('yyyy年MM月');
        date = new Date(_date).Format('dd日');
        for(let k in _rdata) {
          if(month == k) {
            // 判断是否有当前日期的数据
            if(_rdata[k][date]) {
              _rdata[k][date].push({
                icon: this.typeList[elem['type']].icon,
                ptime: _date,
                label: elem['label']
              })
            }else {
               _item = [
                { 
                  icon: this.typeList[elem['type']].icon,
                  ptime: _date,
                  label: elem['label']
                }
              ]
              this.$set(_rdata[month], date, _item);
            }
            return false;
          }
        }
        _item = [
          { 
            icon: this.typeList[elem['type']].icon,
            ptime: _date,
            label: elem['label']
          }
        ]
        this.$set(this.proceessOff, month, true);
        this.$set(_rdata, month, {});
        this.$set(_rdata[month], date, _item);
      });
    },
    getTrackData() {
      // 获取轨迹相识人员数据
      let _id = this.trackParams.id,
          _fromDate = this.trackParams.start ? this.trackParams.start : '',
          _toDate = this.trackParams.end ? this.trackParams.end : '',
          _code = this.checked.join(',');
      if(!_id) {
        return false;
      }
      if(!_code) {
        this.$message.error('请选择轨迹类型后再重试');
        return false;
      }
      if(parseInt(this.input) < 3) {
        this.$message.error('阈值不能小于3');
        return false;
      }
      let params = {
        id: _id,
        code: _code,
        start: _fromDate,
        end: _toDate,
        total: this.input
      }
      // this.trackData = {};
      let _rdata = this.trackData = [];
      this.checkList = {};
      this.$set(this.trackData, 'all', []);
      // 获取人员活动规律数据
      apiTrackData(params).then(res => {
        let _resdata = res['data'];
        // console.log(_resdata)
        if(!_resdata || _resdata.length < 1) {
          this.$message.error('暂无相关数据');
          this.contentData = {};
          this.total = 0;
          return false;
        }
        for(let i = 0; i < _resdata.length; i++) {
          for(let k in _resdata[i]) {
            _rdata.push({
              info: { img: '',name: '',sex: '',age: '',id: k, hjdz: '' },
              radio: 'similar'
            });
            _rdata[i]['similar'] = [];
            _resdata[i][k].forEach(elem => {
              _rdata[i]['similar'].push({
                time: elem['time'].replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/, '$1-$2-$3 $4:$5:$6'),
                label: elem['label'],
              });
            });
          }
        }
        return _rdata;
      }).then(data => {
        if(data.length < 1  || !data) {
          return false;
        }
        data.forEach((elem, k) => {
          this.getPersonInfo(k, data[k]['info']);
        });
        return data;
      }).then(val => {
        if(val.length < 1  || !val) {
          return false;
        }
        this.getPagnation(val);
      })
    },
    // 获取人员基本信息
    getPersonInfo(id, data) {
      let param = {
        id: data['id']
      }
      apiGetPersonInfo(param).then(res => {
        let _resdata = res.data;
        if(!_resdata && _resdata.length< 1) {
          return;
        }
        // console.log(_resdata)
        let _rdata = _resdata[0];
        let _item = {
          img: this.imgBaseUrl.replace(/_idno_/, data['id']),
          name: _rdata['xm'],
          sex: _rdata['xb'],
          age: new Date().getFullYear() - new Date(parseInt(_rdata['csrq'])).getFullYear(),
          id: _rdata['sfzh'],
          hjdz: _rdata['hj'] ? _rdata['hj'] : ''
        }
        this.$set(this.trackData[id], 'info', _item);
      })
    },
    // 相似轨迹人员分页
    getPagnation(data) {
      this.total = data.length;
      let _rdata = this.contentData = [];
      let _from = (this.currentPage - 1) * this.pageSize,
          _to = (this.currentPage * this.pageSize) > this.total ? this.total : (this.currentPage * this.pageSize);
      for(let i = _from; i < _to; i++) {
        _rdata.push(data[i]);
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPagnation(this.trackData);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPagnation(this.trackData);
    },
    // 获取全部轨迹信息
    getAllTrack(id) {
      // console.log(id);
      let _rdata = this.trackData[id];
      if(_rdata['radio'] !== 'all') {
        return false;
      }
      if(_rdata['all'] && _rdata['all'].length > 0) {
        return false;
      }
      apiRegularData(this.trackParams).then(res => {
        let _resdata = res.data;
        // console.log(_resdata);
        if(!_resdata || _resdata.list.length < 1) {
          return false;
        }
        _resdata['list'].forEach(elem => {
          this.$set(_rdata, _rdata['radio'], []);
          _rdata[_rdata['radio']].push({
            time: elem['time'].replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/, '$1-$2-$3 $4:$5:$6'),
            label: elem['label']
          });
        })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
$width = 100vw
$height = 100vh

.hotelcolor{
  background-color #fe6370
}
.wbcolor{
  background-color #64c070
}
.planecolor{
  background-color #709ddf
}
.triancolor{
  background-color #eaa412
}
.buscolor{
  background-color #37b2f2
}
.el-pagination{
  background-color #fff
  text-align center
}
.track-item{
  display inline-block
  height 100%
  vertical-align middle
}
.track-left{
  float left
  width 23%
  background-color #ffffff
  padding 10px
  .step-wrapper{
    height auto
    overflow hidden
    transition .4s all
    &.active{
      height 0
    }
  }
  .item-process{
    width 100%
    height calc(100% - 10px)
    padding 10px 0
    overflow hidden
    &>li:last-of-type{
      .step-wrapper:last-child{
        .process-step:last-of-type:after{
          display none
        }
      }
    }
  }
  .process-step{
    position relative
    padding 5px 0
    &:after{
      position absolute
      bottom 0 
      left 102px
      display block
      content ''
      width 4px
      height calc(50% - 20px)
      background-color #8adef9
    }
    &:before{
      position absolute
      top 0 
      left 102px
      display block
      content ''
      width 4px
      height calc(50% - 20px)
      background-color #8adef9
    }
    &.active:after{
      display none
    }
    .text{
      display inline-block
      width 78px
      color #0090ff
      margin-right 6px
      text-align right 
      vertical-align middle
    }
    .iconfont{
      display inline-block
      width 40px
      height 40px
      line-height 40px
      color #fff
      font-size 26px
      border-radius 50%
      margin-left 2.5px
      margin-right 5px
      text-align center     
      vertical-align middle 
    }
    .icon-qiche{
      font-size 22px
    }
    .step-infor{
      display inline-block
      width calc(100% - 132px)
      vertical-align middle
      color #666666
      font-size 14px
      line-height 18px
      span{
        font-weight 12px
      }
      p{
        color #333
        font-weight bold
      }
    }
  }
  .step-timer{
    padding 20px 0 20px
    &>span,&>.iconfont {
      cursor pointer
    }
    &.first:before{
      display none
    }
    .iconfont{
      position relative
      width 45px
      height 45px
      line-height 0
      margin-left 0
      background-color #50caf2
      &:after{
        position absolute
        top 4px
        left 4px
        display block
        content ''
        width 37px
        height 37px
        background: url('../assets/img/time.png') no-repeat center;
        background-size 100% 100%
      }
    }
  }
}
.track-right{
  float right
  width 76%
  .right-top{
    position relative
    width 100%
    height 12%
    background-color #fff
    padding 10px
  }
  .search-wrapper{
    position absolute
    top 5px
    right 15px
    .el-checkbox{
      margin-right 10px
    }
    .el-input{
      display inline-block
      width (300/1920) * $width
      padding-right 35px
    }
    .el-button{
      position absolute
      right 0
      color #ffffff
      border-color #1977cc
      background-color #1977cc
    }
  }
  .check-wrapper{
    margin-top (24/1080) * $height
    .iconfont{
      display inline-block
      width 40px
      height 40px
      line-height 40px
      color #fff
      font-size 24px
      border-radius 50%
      margin-right 15px
      vertical-align middle
      text-align center
      overflow hidden
    }
    .text{
      display inline-block
      line-height 1
      vertical-align middle
    }
    p{
      color #333
      font-size 18px
      font-weight bold
      margin-bottom 8px
    }
    span{
      color #787878
      font-size 14px
    }
  }
}
.content-list{
  position relative
  top 1%
  height 84%
  font-size 0
  .list-item{
    display inline-block
    width 32.5%
    height 48%
    background-color #fff
    margin-right 1.25%
    margin-bottom 1%
    padding 10px
    vertical-align middle
    &:nth-of-type(3n){
      margin-right 0
    }
  }
  .item-header{
    position relative
    padding-bottom 1%
    border-bottom 1px solid #d1d1d1
    .img-wrapper{
      display inline-block
      width 80px
      height 100px
      overflow hidden
      text-align center
      vertical-align middle
      border 1px solid #196abc
      img{
        width 100%
        height 100%
        vertical-align middle
      }
    }
    .item-info{
      display inline-block
      width calc(100% - 80px)
      padding-left 3%
      vertical-align middle
      .name{
        font-size 14px
        font-weight bold
        margin-bottom 4px
      }
      p{
        line-height 18px
        font-size 12px
        color #444
      }
      .line{
        span{
          display inline-block
          width 50%
        }
      }
      .num{
        position absolute
        top 0
        right 1%
        color #ff6600
        font-size 20px
      }
    }
  }
  .item-bottom{
    li{
      padding 2px 0
      border-bottom 1px dashed #d1d1dd
    }
    .iconfont{
      display inline-block
      font-size 24px
      color #288fd8
      vertical-align middle
    }
    .text{
      display inline-block
      width 87%
      padding-left 2%
      vertical-align middle
      span,p{
        line-height 18px
      }
      span{
        font-size 12px
        color #787878
      }
      p{
        font-size 12px
        color #000000
      }
    }
  }
}
.nodata{
  height: 20%;
  width: 100%;
  font-size: 16px;
  line-height: 60px;
  background-color: #fff;
  text-align: center;
  margin-top: 2%;
}
</style>
<style lang="stylus">
.el-radio__label{
  font-size 12px !important
}
</style>
